<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <el-dialog v-model="props.visible" title="元文件数据属性与目标数据库的字段映射关系如下：" @close="handleClose">
    <div class="p-2 source_file_management">
      <el-card v-for="(val, key) in tableList" :key="key" shadow="hover" style="margin-top: 15px">
        <template #header>
          <div class="card-header">
            <span>数据源：{{ key.split('::')[0] }} => 目标数据库：{{ key.split('::')[1] }}</span>
          </div>
        </template>
        <el-table v-loading="loading" :data="val">
          <el-table-column label="序号" align="center" width="80" show-overflow-tooltip fixed="left">
            <template #default="{ $index }">
              {{ $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="数据源 字段名称" align="center" prop="metadataField" show-overflow-tooltip>
            <template #header>
              <div style="color: #409eff">数据源：{{ key.split('::')[0] }}</div>
              <div>字段名称</div>
            </template>
            <template #default="scope">
              <span>{{ scope.row.metadataField }}</span>
            </template>
          </el-table-column>
          <el-table-column label="目标数据库 字段名称" align="center" prop="targetField" show-overflow-tooltip>
            <template #header>
              <div style="color: #409eff">目标数据库：{{ key.split('::')[1] }}</div>
              <div>字段名称</div>
            </template>
            <template #default="scope">
              <span>{{ scope.row.targetField }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" type="primary" @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
const props = defineProps(['visible', 'mapFields']);
const emits = defineEmits(['handleEvent']);
const tableList = ref([]);
// 关闭弹窗处理
const handleClose = () => {
  emits('handleEvent', { type: 'close' });
};

onMounted(() => {
  tableList.value = JSON.parse(props.mapFields);
  console.log('tableList', tableList.value);
});
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
